<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DroperMenuCom 下拉菜单组件</title>
    <link rel="stylesheet" href="DroperMenuCom.css">
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3079042_4x4v235jnwh.css">
    <style>
        body {
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        
        .section {
            background: white;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        h1, h2 {
            color: #333;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .log {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 10px;
            height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 14px;
        }
        
        .log-item {
            margin-bottom: 5px;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }
        
        .log-item:last-child {
            border-bottom: none;
        }
        
        .log-time {
            color: #6c757d;
            margin-right: 10px;
        }
        
        .log-event {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>DroperMenuCom 下拉菜单组件演示</h1>
        
        <div class="section">
            <h2>基础下拉s菜单</h2>
            <div id="droper1"></div>
        </div>
        
        <div class="section">
            <h2>可创建的下拉菜单</h2>
            <div id="droper2"></div>
        </div>
        
        <div class="section">
            <h2>事件日志</h2>
            <div id="log" class="log"></div>
        </div>
    </div>

    <script src="DroperMenuCom.js"></script>
    <script>
        // 添加日志
        function addLog(event, data) {
            const logEl = document.getElementById('log');
            const time = new Date().toLocaleTimeString();
            const logItem = document.createElement('div');
            logItem.className = 'log-item';
            logItem.innerHTML = `<span class="log-time">[${time}]</span> <span class="log-event">${event}</span> ${data ? JSON.stringify(data) : ''}`;
            logEl.appendChild(logItem);
            logEl.scrollTop = logEl.scrollHeight;
        }
        
        // 基础下拉菜单数据
        const basicData = [
            { text: '颜色组1', icon: 'iconfont icon-color',value:'color1',data:["#ff0000","#00ff00","#0000ff"]},
            { text: '颜色组2', icon: 'iconfont icon-color',value:'color2' ,data:[]},
            { text: '颜色组3', icon: 'iconfont icon-color',value:'color3' ,data:[]}
        ];
        
        // 创建基础下拉菜单
        const droper1 = new DroperMenuCom(document.getElementById('droper1'), {
            placeholder: '请选择颜色组',
            data: basicData,
            width: "240px",
            changeHandler: function(item) {
                addLog('change', item);
            }
        });
        
        // 绑定事件
        droper1.on('open', function() {
            addLog('open');
        });
        
        droper1.on('close', function() {
            addLog('close');
        });
        
        droper1.on('change', function(item) {
            addLog('change', item);
        });
        
        // 创建可创建的下拉菜单
        const droper2 = new DroperMenuCom(document.getElementById('droper2'), {
            size: 'small',
            creatable: true,
            createText: '创建新组',
            placeholder: '请选择或创建颜色组',
            data: [],
            changeHandler: function(item) {
                addLog('change', item);
            }
        });
        
        // 绑定事件
        droper2.on('open', function() {
            addLog('open');
        });
        
        droper2.on('close', function() {
            addLog('close');
        });
        
        droper2.on('change', function(item) {
            addLog('change', item);
        });
        
        droper2.on('create', function(item) {
            addLog('create', item);
        });
        
        droper2.on('edit', function(data) {
            addLog('edit', data);
        });
        
        droper2.on('delete', function(index) {
            addLog('delete', { index: index });
        });
    </script>
</body>
</html>